<template>
  <FModal ref="FModal" header="添加页签夹" :width="600" @ok="save">
    <div style="padding-right: 30px">
      <el-form ref="form" label-width="120px" :model="tabsMenu">
        <el-form-item prop="menuName" label="页签夹名称" :rules="[required]">
          <el-input v-focus placeholder="请输入页签夹名称" v-model="tabsMenu.menuName"/>
        </el-form-item>
      </el-form>
    </div>
  </FModal>
</template>

<script>
import FModal from '@/components/FModal';
import {DefaultAppMenuDefinition} from '@/components/form/DefaultFormDefinition';
import {guid, required} from '@/utils/CommonUtils';

export default {
  name: "AppTabsMenuConfig",
  components: {
    FModal
  },
  data() {
    return {
      required,
      tabsMenu: JSON.parse(JSON.stringify(DefaultAppMenuDefinition)),
    };
  },
  methods: {
    setData(folderMenu) {
      this.tabsMenu = folderMenu;
      folderMenu.menuType = 'tabs';
      this.$refs.FModal.open();
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      })
    },
    save() {
      this.$refs.form.validate((valid, errors) => {
        if (valid) {
          this.tabsMenu.id = guid();
          this.$emit('addTabs', this.tabsMenu);
          this.$refs.FModal.close();
        }
      });
    },
  }
};
</script>

<style scoped>

</style>